<!DOCTYPE html>
<html>
    <head>
        <title>
        </title>
        <link href="/layui/css/layui.css" media="all" rel="stylesheet">
        </link>
        <style>
        </style>
    </head>
    <body>
        <script src="/layui/layui.js">
        </script>
        <form class="layui-form">
            <table class="layui-table" id="demo" lay-filter="demo">
                <colgroup>
                    <col width="200">
                        <col width="200">
                            <col>
                            </col>
                        </col>
                    </col>
                </colgroup>
                <thead>
                     <tr>
                      <th colspan="1" rowspan="2" width="">项目</th>
                      <th colspan="4" style="text-align: center">KTV</th>
                      <th colspan="1" rowspan="2" style="text-align: center">七一碗</th>
                      <th colspan="1" rowspan="2">总计</th>
                    </tr>
                    <tr>
                        <th width="" class="th_input"><input class="layui-input" style="display:inline, width:20px" lay-verify="required|number" name="" placeholder="x月增加数"></th>
                        <th width="" class="th_input"><input class="layui-input" style="display:inline, width:20px" lay-verify="required|number" name="" placeholder="x月增加数"></th>
                        <th width="" class="th_input"><input class="layui-input" style="display:inline, width:20px" lay-verify="required|number" name="" placeholder="x月增加数"></th>
                        <th>合计</th>
                    </tr>
                </thead>
                <tbody class="data-tbody">
                    <tr>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="请输入项目" lay-verify="required" type="text" value=""/>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input " lay-verify="number" name="" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input " lay-verify="number" name="" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input " lay-verify="number" name="" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                        <td>
                            <input autocomplete="off" lay-data="" class="layui-input " lay-verify="number" name="" placeholder="请输入" required="" type="text" value="0"/>
                        </td>
                    </tr>
                </tbody>
            </table>
            {{csrf_field()}}
            
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn submit" lay-filter="formDemo" lay-submit="">
                        立即提交
                    </button>
                    <button class="layui-btn add" >添加一行</button>
                    <button class="layui-btn reduce" >减少一行</button>
                </div>
            </div>
        </form>
    </body>
</html>
<script>
    //Demo
    layui.use(['form','table'], function () {
        var table = layui.table;
        var form = layui.form;

        //监听提交
        form.on('submit(formDemo)', function(data){
            layer.msg('已提交');
            //layer.msg(JSON.stringify(data.field));
            var sum_data = [];
            $('.straight_alcohol').each(function () {
                var values = $(this).val();
                //straight_alcohol.push(values);
            });
            $('.data-tbody').children('tr').each(function () {
                var data = [];
                // $(this).children('td:lt(1)').each(function () {
                //     var text = $(this).text().replace(/\ +/g,"").replace(/[\r\n]/g,"");
                //     data.push(text)
                // });
                $(this).children('td').each(function () {
                    var val = $(this).children('input').val();
                    //console.log(val);
                    data.push(val);
                });
                sum_data.push(data);
            });
            
            //var input = $('th').children('input');
            //console.log(input);
            var th_input = [];
            $('.th_input').children('input').each(function () {
                th_input.push($(this).val()+'月增加数');
            });
            var head = ['项目', th_input, '合计', '七一碗', '总计'];
            console.log(th_input);
            table.exportFile(head, sum_data, '{{$title}}.csv'); //默认导出 csv，也可以为：xls
            return false;
        });
        // 增加
        $('.add').on('click', function () {
            var index = $('.data-tbody').children('tr').length;
            var html = '';
                html += '<tr>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="请输入项目" lay-verify="required" type="text" value=""/>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input " lay-verify="number" name="" placeholder="请输入" required="" type="text" value="0"/>';
                    html += '</td>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="请输入" required="" type="text" value="0"/>';
                    html += '</td>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input " lay-verify="number" name="" placeholder="请输入" required="" type="text" value="0"/>';
                    html += '</td>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input "  name="" placeholder="请输入" required="" type="text" value="0"/>';
                    html += '</td>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input " lay-verify="number" name="" placeholder="请输入" required="" type="text" value="0"/>';
                    html += '</td>';
                    html += '<td>';
                        html += '<input autocomplete="off" lay-data="" class="layui-input " lay-verify="number" name="" placeholder="请输入" required="" type="text" value="0"/>';
                    html += '</td>';
                html += '</tr>';


            $('.data-tbody').append(html);
            layer.msg(index);
            return false;
        });
        // 减少
        $('.reduce').on('click', function () {
            var index = $('.data-tbody').children('tr').length;
            if (index <= 1) {
                layer.msg('保留'+index+'行');
                return false;
            }
            $('.data-tbody').children('tr')[index - 1].remove();
            return false;
        });
    });
</script>